<template>
  <div class="container">
    <Breadcrumb :items="['menu.management', '企业详情']" />
    <a-space direction="vertical" :size="16" fill>
      <a-card class="general-card">
        <ProfileItem :loading="preLoading" type="pre" :render-data="preData" />
      </a-card>
      <div class="enterprise-detail">
        <a-tabs default-active-key="3">
          <a-tab-pane key="1" title="资产信息">Content of Tab Panel 1</a-tab-pane>
          <a-tab-pane key="2" title="测绘资产">Content of Tab Panel 2</a-tab-pane>
          <a-tab-pane key="3">
            <template #title>检测信息</template>
            <div>
              <ChainItem
                :title="$t('dataAnalysis.card.title.totalShare')"
                quota="share"
                chart-type="pie"
                :card-style="{
                  background: isDark
                    ? 'linear-gradient(180deg, #312565 0%, #201936 100%)'
                    : 'linear-gradient(180deg, #F7F7FF 0%, #ECECFF 100%)'
                }"
              />
            </div>
          </a-tab-pane>
          <a-tab-pane key="4" title="漏扫信息">Content of Tab Panel 2</a-tab-pane>
        </a-tabs>
      </div>

      <!-- <a-card class="general-card">
        <ProfileItem :loading="loading" :render-data="currentData" />
      </a-card> -->

      <OperationLog />
    </a-space>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import useLoading from "@/hooks/loading"
import { queryProfileBasic, ProfileBasicRes } from "@/api/profile"
import ProfileItem from "./components/profile-item.vue"
import OperationLog from "./components/operation-log.vue"
import useThemes from "@/hooks/themes"
import ChainItem from "./components/chain-item.vue"

const { isDark } = useThemes()

// const { loading } = useLoading(true)
const { loading: preLoading, setLoading: preSetLoading } = useLoading(true)
// const currentData = ref<ProfileBasicRes>({} as ProfileBasicRes)
const preData = ref<ProfileBasicRes>({} as ProfileBasicRes)
// const step = ref(1)
// const fetchCurrentData = async () => {
//   try {
//     const { data } = await queryProfileBasic()
//     currentData.value = data
//     step.value = 2
//   } catch (err) {
//     // you can report use errorHandler or other
//   } finally {
//     setLoading(false)
//   }
// }
const fetchPreData = async () => {
  try {
    const { data } = await queryProfileBasic()
    preData.value = data
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    preSetLoading(false)
  }
}
// fetchCurrentData()
fetchPreData()
</script>

<script lang="ts">
export default {
  name: "Basic"
}
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
}
.enterprise-detail {
  background-color: #fff;
  padding: 10px 20px 20px 20px;
}
.steps {
  max-width: 548px;
  margin: 0 auto 10px;
}
</style>
